<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by GetTemplates.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="GetTemplates.co" />

<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

<!-- Animate.css -->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/themify-icons.css">
<!-- Bootstrap  -->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/bootstrap.css">

<!-- Magnific Popup -->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/magnific-popup.css">
<!-- Owl Carousel  -->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.carousel.min.css">
<link rel="stylesheet" href="${ctx}/assets/layouts/css/owl.theme.default.min.css">

<!-- Theme style  -->
<link rel="stylesheet" href="${ctx}/assets/layouts/css/style.css">

<!-- Modernizr JS -->
<script src="${ctx}/assets/layouts/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
</head>
<style>
.gtco-container {
    margin-top: -1em;
}
</style>
<body >
<div id="page1" style="height: 100%;">

<!-- <div class="page-inner"> -->
<nav class="gtco-nav" role="navigation">
    <div class="gtco-container">

        <div class="row">
            <div class="col-sm-4 col-xs-12">
                <div id="gtco-logo">
                    <label style="color: white;font-weight: 300">注册</label>
                </div>
            </div>
        </div>
    </div>
</nav>

<header id="gtco-header" class="gtco-cover gtco-cover-md" role="banner" style="background-image: url(${ctx}/assets/layouts/images/img_bg_1.jpg)" data-stellar-background-ratio="0.5">
    <div class="overlay"></div>
    <div class="gtco-container">
        <div class="row">
            <div class="col-md-12 col-md-offset-0 text-left">
                <div class="row row-mt-15em" style="margin-top: 3em;">
                    <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
                        <div class="form-wrap">
                            <div class="tab">
                                <div class="tab-content">
                                    <div class="tab-content-inner active" data-content="signup">
                                        <div id="error-message" style="color: red;margin-bottom: 10px;"></div>
                                        <h3 class="cursive-font">注册信息</h3>
                                        <%--<form id="register-form" action="${ctx}/app/register_login" method="post">--%>
                                        <form id="register-form" action="#" method="post">
                                        <%--<div id="register-form">--%>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="text" id="name" name="name" class="form-control" placeholder="姓名"
                                                           data-rule-required="true" data-msg-required="请输入姓名">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-6" style="float: left;padding-left: 25%">
                                                    <input type="radio" name="gender" value="1" checked><label>男</label>
                                                </div>
                                                <div class="col-md-6" style="float: left;padding-left: 25%">
                                                    <input type="radio" name="gender" value="0"><label>女</label>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="text" id="phone" name="phone" class="form-control" placeholder="手机号"
                                                           data-rule-required="true" data-msg-required="请输入手机号"
                                                           data-rule-number="true" data-msg-number="手机号格式不正确"
                                                           data-rule-minlength="11" data-msg-minlength="手机号格式不正确"
                                                           data-rule-maxlength="11" data-msg-maxlength="手机号格式不正确">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="password" id="password" name="password" class="form-control" placeholder="密码(至少六位)"
                                                           data-rule-required="true" data-msg-required="请输入密码"
                                                           data-rule-minlength="6" data-msg-minlength="密码至少为六位">
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <input type="password" name="password_repeat" class="form-control" placeholder="重复密码"
                                                           data-rule-required="true" data-msg-required="请再次输入密码"
                                                           data-rule-minlength="6" data-msg-minlength="密码至少为六位"
                                                           data-rule-equalTo="#password" data-msg-equalTo="两次密码输入不一致">
                                                </div>
                                            </div>
                                            <%--<div class="row form-group">--%>
                                                <%--<div class="col-md-12">--%>
                                                    <%--<input type="text" id="card" name="card" class="form-control" placeholder="身份证号"--%>
                                                           <%--data-rule-required="true" data-msg-required="请输入身份证号"--%>
                                                           <%--data-rule-isCard="true">--%>
                                                <%--</div>--%>
                                            <%--</div>--%>
                                            <%--<div class="row form-group">--%>
                                                <%--<div class="col-md-12">--%>
                                                    <%--<input type="text" id="address" name="address" class="form-control" placeholder="地址">--%>
                                                <%--</div>--%>
                                            <%--</div>--%>

                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <a style="color: white!important;" href="javascript:;" id="submit_register" onclick="register()" class="btn btn-primary btn-block">完成</a>
                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-12">
                                                    <a href="javascript:window.location.href='${ctx}/app/login'" id="back_login">登录</a>
                                                </div>
                                            </div>
                                        </form>
                                        <%--</div>--%>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
</div>
<!-- jQuery -->
<script src="${ctx}/assets/layouts/js/jquery.min.js"></script>
<script src="${ctx}/assets/layouts/js/jquery.waypoints.min.js"></script>
<script src="${ctx}/assets/layouts/js/moment.min.js"></script>
<script src="${ctx}/assets/layouts/js/owl.carousel.min.js"></script>
<script src="${ctx}/assets/layouts/js/main.js"></script>
<script src="${ctx}/assets/pages/scripts/app.js"></script>
<script src="${ctx}/assets/global/plugins/jquery-validation/js/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {
    // 验证手机号是否已被注册
    $( "#register-form" ).validate({
        rules: {
            phone: {
                remote: {
                    url: "${ctx}/app/check",
                    type: "post",
                    async: false,           // ！设置为同步
                    data: {
                        data: function () {
                            return $('#phone').val()
                        }
                    }
                }
            }
        },
        messages: {
            phone: {
                remote: "该手机号已被注册"
            }
        }
    });
//    // 验证身份证号格式
//    jQuery.validator.addMethod("isCard", function(value,element) {
//        if(!/^\d{17}(\d|x)$/i.test(value));
//        var card_format = /^\d{17}(\d|x)$/i;
//        return this.optional(element) || card_format.test(value);
//
//    }, "身份证号格式不正确");

//    $("#register-form").validate();
});

// 提交注册
function register() {
    var check = $("#register-form").validate().form();
    if (!check) {
        return;
    }
    var data = {
        name: $("#name").val(),
        phone: $("#phone").val(),
//        card: $("#card").val(),
        password: $("#password").val(),
        gender: $('input[name="gender"]:checked').val()
//        address: $("#address").val()
    }
    ajaxPostWithJson("${ctx}/app/register_login", data, function (baseModel) {
        if (baseModel.hasError) {
            $("#error-message").html("注册失败，请稍后重试");
        } else {
            window.location.href='${ctx}/app/login';
        }
    },function (msg) {
        $("#error-message").html("注册失败，请您稍后重试");
    });
}
</script>
</body>
</html>

